<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram</title>
</head>
<body>
<canvas id="physicsCanvas" width="600" height="400" style="border:1px solid #d3d3d3;"></canvas>
<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // --- Style settings ---
    ctx.lineWidth = 1.5;
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.font = '20px Arial';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';

    // --- Coordinates and Parameters ---
    const centerX = 300;
    const dishLowestY = 280; // y-coordinate for point C
    const dishCurveControlY = 340;
    const dishStartX = 80;
    const dishEndX = 520;
    const dishStartY = 240.625; // Calculated to match parabola shape
    const dishEndY = dishStartY;

    const ballRadius = 13;
    const ballHorizDist = 140; // Horizontal distance 'x' from center
    const ballCenterX = centerX - ballHorizDist;
    // Calculate ball's Y position to be on the curve
    // The curve is a parabola y = a(x-h)^2 + k
    // Vertex (h,k) = (centerX, dishLowestY) = (300, 280)
    // Point on curve (dishStartX, dishStartY) = (80, 240.625) -> this is not correct as quadratic Bezier is not a perfect parabola.
    // Let's use the quadratic Bezier formula to find the point
    // B(t) = (1-t)^2*P0 + 2t(1-t)*P1 + t^2*P2
    // Let's define the curve with moveTo, and quadraticCurveTo.
    // P0=(dishStartX, dishStartY), P1=(centerX, dishCurveControlY), P2=(dishEndX, dishEndY)
    // To make a symmetric curve with vertex at (centerX, dishLowestY), the control point x should be centerX,
    // and the vertex Y is (start_y + control_y)/2. So if vertex is 280, and control is 340, start_y = 2*280 - 340 = 220.
    const dishCurveStartY = 220;
    const dishCurveEndY = 220;

    // Now find the ball's position on this new curve
    // P0 = (80, 220), P1 = (300, 340), P2 = (520, 220)
    // Bx(t) = (1-t)^2*80 + 2t(1-t)*300 + t^2*520 = ballCenterX = 160
    // 80(1-2t+t^2) + 600(t-t^2) + 520t^2 = 160
    // 80 - 160t + 80t^2 + 600t - 600t^2 + 520t^2 = 160
    // t^2(80-600+520) + t(-160+600) + 80 = 160
    // 0*t^2 + 440t = 80
    // t = 80/440 = 2/11 ≈ 0.1818
    const t_ball = 2/11;
    // By(t) = (1-t)^2*220 + 2t(1-t)*340 + t^2*220
    const ballCenterY = Math.pow(1-t_ball, 2)*220 + 2*t_ball*(1-t_ball)*340 + Math.pow(t_ball, 2)*220; // Approx 259.5
    
    const groundY = 285;


    // --- Drawing Functions ---
    function drawArrow(ctx, fromx, fromy, tox, toy, headlen = 8) {
        const dx = tox - fromx;
        const dy = toy - fromy;
        const angle = Math.atan2(dy, dx);
        ctx.moveTo(tox, toy);
        ctx.lineTo(tox - headlen * Math.cos(angle - Math.PI / 6), toy - headlen * Math.sin(angle - Math.PI / 6));
        ctx.moveTo(tox, toy);
        ctx.lineTo(tox - headlen * Math.cos(angle + Math.PI / 6), toy - headlen * Math.sin(angle + Math.PI / 6));
    }

    // --- Draw Scene ---

    // 1. Draw ground surface
    ctx.beginPath();
    ctx.moveTo(0, groundY);
    ctx.lineTo(canvas.width, groundY);
    ctx.stroke();
    ctx.beginPath();
    for (let i = 0; i <= canvas.width; i += 20) {
        ctx.moveTo(i, groundY);
        ctx.lineTo(i - 15, groundY + 15);
    }
    ctx.stroke();

    // 2. Draw the dish surface
    ctx.beginPath();
    ctx.moveTo(dishStartX, dishCurveStartY);
    ctx.quadraticCurveTo(centerX, dishCurveControlY, dishEndX, dishCurveEndY);
    ctx.lineWidth = 2;
    ctx.stroke();
    ctx.lineWidth = 1.5; // Reset line width

    // 3. Draw the ball
    ctx.beginPath();
    ctx.arc(ballCenterX, ballCenterY, ballRadius, 0, 2 * Math.PI);
    ctx.fillStyle = '#D3D3D3';
    ctx.fill();
    ctx.strokeStyle = 'black';
    ctx.stroke();

    // 4. Draw labels and pointers
    ctx.fillStyle = 'black';

    // "ball mass 45g" label
    ctx.textAlign = 'left';
    ctx.fillText('ball', 80, 60);
    ctx.fillText('mass 45g', 80, 85);
    ctx.beginPath();
    ctx.moveTo(155, 75);
    ctx.lineTo(ballCenterX, ballCenterY - ballRadius);
    ctx.stroke();

    // "surface of dish" label
    ctx.textAlign = 'left';
    ctx.fillText('surface', 450, 80);
    ctx.fillText('of dish', 450, 105);
    ctx.beginPath();
    ctx.moveTo(485, 115);
    ctx.lineTo(460, 200);
    ctx.stroke();

    // 5. Draw point C
    ctx.beginPath();
    ctx.arc(centerX, dishLowestY, 3, 0, 2 * Math.PI);
    ctx.fill();
    ctx.textAlign = 'center';
    ctx.fillText('C', centerX, dishLowestY + 20);

    // 6. Draw dimension 'x'
    const dimLineY = 180;
    // Dashed lines
    ctx.save();
    ctx.setLineDash([5, 5]);
    ctx.beginPath();
    ctx.moveTo(ballCenterX, ballCenterY);
    ctx.lineTo(ballCenterX, dimLineY);
    ctx.moveTo(centerX, dishLowestY);
    ctx.lineTo(centerX, dimLineY);
    ctx.stroke();
    ctx.restore();

    // Horizontal line with arrows
    ctx.beginPath();
    ctx.moveTo(ballCenterX, dimLineY);
    ctx.lineTo(centerX, dimLineY);
    drawArrow(ctx, centerX, dimLineY, ballCenterX, dimLineY); // Arrow at left end
    drawArrow(ctx, ballCenterX, dimLineY, centerX, dimLineY); // Arrow at right end
    ctx.stroke();
    
    // 'x' label
    ctx.fillText('x', (ballCenterX + centerX) / 2, dimLineY - 15);

    // 7. Draw Figure caption
    ctx.fillText('Fig. 4.1', centerX, 370);

</script>
</body>
</html>